<template>
	<div class="container">
		<transition :enter-active-class="proxy?.animate.searchAnimate.enter"
					:leave-active-class="proxy?.animate.searchAnimate.leave">
			<div v-show="showSearch" class="search">
				<el-form ref="queryFormRef" :inline="true" :model="queryParams" label-width="68px">
					<el-form-item label="阅读状态" prop="readStatus">
						<el-select v-model="queryParams.readStatus" clearable placeholder="请选择阅读状态"
								   style="width: 200px">
							<el-option
								v-for="dict in sys_notice_read"
								:key="dict.value"
								:label="dict.label"
								:value="dict.value"
							/>
						</el-select>
					</el-form-item>
					<el-form-item label="类型" prop="noticeType">
						<el-select v-model="queryParams.noticeType" clearable placeholder="请选择类型"
								   style="width: 200px">
							<el-option
								v-for="dict in sys_notice_type"
								:key="dict.value"
								:label="dict.label"
								:value="dict.value"
							/>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button icon="Search" type="primary" @click="handleQuery">搜索</el-button>
						<el-button icon="Refresh" @click="resetQuery">重置</el-button>
					</el-form-item>
				</el-form>
			</div>
		</transition>

		<el-card shadow="never">
			<el-table v-loading="loading" :data="noticeList">
				<el-table-column v-if="false" align="center" label="ID" prop="id" />
				<el-table-column align="center" label="序号" type="index" width="50">
					<template #default="scope">
						<span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
					</template>
				</el-table-column>
				<el-table-column align="center" label="标题" prop="noticeTitle" />
				<el-table-column align="center" label="类型" prop="noticeType">
					<template #default="scope">
						<dict-tag :options="sys_notice_type" :value="scope.row.noticeType" />
					</template>
				</el-table-column>
				<el-table-column align="center" label="是否已读" prop="readStatus">
					<template #default="scope">
						<dict-tag :options="sys_notice_read" :value="scope.row.readStatus" />
					</template>
				</el-table-column>
				<el-table-column align="center" label="阅读时间" prop="readTime" width="180">
					<template #default="scope">
						<span>{{ parseTime(scope.row.readTime, "{y}-{m}-{d}") }}</span>
					</template>
				</el-table-column>
				<el-table-column align="center" label="创建时间" prop="createTime" width="180">
					<template #default="scope">
						<span>{{ parseTime(scope.row.createTime, "{y}-{m}-{d} {h}:{i}:{s}") }}</span>
					</template>
				</el-table-column>
				<el-table-column align="center" class-name="small-padding fixed-width" label="操作">
					<template #default="scope">
						<el-tooltip content="查看详情" placement="top">
							<el-button v-hasPermi="['system:notice:query']" icon="View" link type="primary"
									   @click="handleDetail(scope.row)"></el-button>
						</el-tooltip>
					</template>
				</el-table-column>
			</el-table>

			<pagination
				v-show="total>0"
				v-model:limit="queryParams.pageSize"
				v-model:page="queryParams.pageNum"
				:total="total"
				@pagination="getList"
			/>
		</el-card>
		<!-- 通知详情对话框 -->
		<el-dialog v-model="dialog.visible" append-to-body width="50%">
			<el-descriptions
				:column="2"
				:title="dialog.title"
				border
				direction="horizontal"
				size="default"
			>
				<el-descriptions-item label="类型" label-width="120px">
					<dict-tag :options="sys_notice_type" :value="noticeDetail.noticeType" />
				</el-descriptions-item>
				<el-descriptions-item label="发送时间" label-width="120px">{{ noticeDetail.createTime }}
				</el-descriptions-item>
			</el-descriptions>
			<el-descriptions
				:column="1"
				border
				direction="horizontal"
				size="default"
			>
				<el-descriptions-item label="标题" label-width="120px">{{ noticeDetail.noticeTitle }}
				</el-descriptions-item>
			</el-descriptions>
			<el-descriptions
				:column="1"
				border
				direction="horizontal"
				size="default"
			>
				<el-descriptions-item label="内容" label-width="120px">
					<div v-html="noticeDetail.noticeContent"></div>
				</el-descriptions-item>
			</el-descriptions>
			<template #footer>
				<div class="dialog-footer">
					<el-button type="primary" @click="cancel">关 闭</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" name="Notice" setup>
import { listNotice, getNotice } from "@/api/system/userNotice";
import { UserNoticeVO, UserNoticeQuery, UserNoticeForm } from "@/api/system/userNotice/types";
import useNoticeStore from "@/store/modules/notice";

const { refreshData } = useNoticeStore();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { sys_notice_read, sys_notice_type } = toRefs<any>(proxy?.useDict("sys_notice_read", "sys_notice_type"));
const noticeList = ref<UserNoticeVO[]>([]);
const noticeDetail = reactive<UserNoticeVO>({
	id: 0,
	userId: 0,
	noticeId: "",
	readStatus: "",
	noticeType: "",
	readTime: "",
	noticeTitle: "",
	noticeContent: "",
	createTime: "",
	remark: "",
});
const loading = ref(true);
const showSearch = ref(true);
const total = ref(0);

const queryFormRef = ref<ElFormInstance>();
const noticeFormRef = ref<ElFormInstance>();

const dialog = reactive<DialogOption>({
	visible: false,
	title: "",
});

const initFormData: UserNoticeForm = {
	id: undefined,
	userId: undefined,
	noticeId: undefined,
	readStatus: undefined,
	readTime: undefined,
};
const data = reactive<PageData<UserNoticeForm, UserNoticeQuery>>({
	form: { ...initFormData },
	queryParams: {
		pageNum: 1,
		pageSize: 10,
		params: {},
	},
	rules: {},
});

const { queryParams, form, rules } = toRefs(data);

/** 查询用户消息关联列表 */
const getList = async () => {
	loading.value = true;
	const res = await listNotice(queryParams.value);
	noticeList.value = res.rows;
	total.value = res.total;
	loading.value = false;
};

/** 取消按钮 */
const cancel = () => {
	reset();
	getList();
	dialog.visible = false;
};

/** 表单重置 */
const reset = () => {
	form.value = { ...initFormData };
	noticeFormRef.value?.resetFields();
};

/** 搜索按钮操作 */
const handleQuery = () => {
	queryParams.value.pageNum = 1;
	getList();
};

/** 重置按钮操作 */
const resetQuery = () => {
	queryFormRef.value?.resetFields();
	handleQuery();
};

/** 查看消息详情 */
const handleDetail = async (row: UserNoticeVO) => {
	const res = await getNotice(row.id);
	Object.assign(noticeDetail, res.data);
	refreshData();//刷新消息数量
	dialog.visible = true;
	dialog.title = "消息详情";
};


onMounted(() => {
	getList();
});
</script>

<style scoped>
.noticeTitle {
	width: 100%;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	font-weight: bold;
}

</style>
